<template>
  <div>
    <!-- 导航栏 -->
    <div class="navBox" :class="{ navBoxDark: darkFlag }">
      <!-- 登录部分 -->
      <div
        class="headIconBox"
        :class="{ headIconBoxDark: darkFlag }"
        @click="loginDis()"
      >
        <div class="changeNav" style="height: 40px">
          <img src="../assets/img/logo.png" alt="" />
          <p class="headP">{{ userName }}</p>
        </div>
      </div>
      <!-- 顶部页面切换导航栏 -->
      <div
        class="navItem changeNav"
        v-for="(element, index) in navArray"
        :key="index"
        @click="changePage(element.page, index)"
        :class="{
          navItemChoose: page == element.page,
          navItemDark: darkFlag,
          navItemChooseDark: (page == element.page) & darkFlag,
        }"
      >
        <span class="iconfont navIcon" :class="element.icon"></span>
        <div
          class="deletePageBox"
          @click="deletePage(element.page, index)"
          v-if="(index != 0) & (user_id != -99999)"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-guanbi"></use>
          </svg>
        </div>
        <div class="navP">{{ element.page }}</div>
      </div>
      <!-- 新建分页 -->
      <div
        class="bottomIconBox"
        @click="addPage()"
        :class="{ bottomIconBoxDark: darkFlag }"
        @mousedown="rightListOn()"
      >
        <span class="iconfont bottomIcon icon-zengjia" style="font-size: 26px">
        </span>
        <div class="bottomP">新建分页</div>
      </div>
      <!-- 底部工具导航栏 -->
      <div class="bottomIconBigBox changeNav">
        <div
          class="bottomIconBox"
          @click="changeBgOpen()"
          :class="{ bottomIconBoxDark: darkFlag }"
        >
          <span
            class="iconfont bottomIcon icon-tupianbizhi"
            style="font-size: 30px"
          >
          </span>
          <div class="bottomP">壁纸</div>
        </div>
        <div
          class="bottomIconBox"
          @click="darkChange()"
          :class="{ bottomIconBoxDark: darkFlag }"
        >
          <span
            class="iconfont bottomIcon icon-moonbyueliang"
            style="padding-left: 14px"
          >
          </span>
          <div class="bottomP">夜间模式</div>
        </div>
        <div
          class="bottomIconBox"
          :class="{ bottomIconBoxDark: darkFlag }"
          @click="settingBoxOpen()"
        >
          <span
            class="iconfont bottomIcon icon-shezhi"
            style="padding-left: 14px"
          >
          </span>
          <div class="bottomP">设置</div>
        </div>
      </div>
    </div>
    <!-- 快捷链接页面切换主体 -->
    <div class="page" @click="menuClose()">
      <div class="linkBox">
        <!-- 天气模块 -->
        <div class="weatherBox" v-show="page == '主页'">
          <div id="he-plugin-standard"></div>
        </div>
        <!-- 快捷链接图标模块 -->
        <draggable
          chosenClass="chosen"
          group="type"
          animation="180"
          v-model="linkTotalArray"
          @end="endMove()"
        >
          <div
            class="linkItem"
            v-for="(element, index) in linkTotalArray"
            :key="index"
            @click="jumpUrl(element)"
            v-show="showItem(element.page)"
            @contextmenu.prevent.stop="rightClick($event, index)"
          >
            <svg class="icon" aria-hidden="true" :style="element.color">
              <text
                v-if="element.color"
                x="25"
                y="33"
                :fill="fillColor"
                text-anchor="middle"
                font-size="28px"
              >
                {{ element.linkName.charAt(0) }}
              </text>
              <image
                v-if="element.img"
                :xlink:href="element.img"
                x="0"
                y="0"
                width="50px"
                height="50px"
                preserveAspectRatio="xMidYMin slice"
              />
              <use v-if="!element.img" :xlink:href="element.icon"></use>
            </svg>
            <p>{{ element.linkName }}</p>
          </div>
          <!-- 新建图标 -->
          <div class="linkItem" @click="addLink()">
            <span
              class="iconfont icon-zengjia"
              :class="{ addLinkBtnDark: darkFlag }"
            ></span>
            <p>新建图标</p>
          </div>
        </draggable>
      </div>
    </div>
    <!-- 新建分页弹窗 -->
    <transition name="appear">
      <div
        class="addNavBg"
        v-if="this.addflag"
        :class="{ addNavBgDark: darkFlag }"
      >
        <div class="addNavBox" :class="{ addNavBoxDark: darkFlag }">
          <h2>新增分页</h2>
          <p class="addNavBoxP">新建分页名称：</p>
          <transition name="nameWarn">
            <p class="warnP" v-if="warnFlag">请输入分页名称!</p>
          </transition>
          <input
            type="text"
            class="pageNameInput"
            v-model="newPageName"
            :style="pageInputWarn"
            :class="{ pageNameInputDark: darkFlag }"
          />
          <p class="addNavBoxP">选择图标：</p>
          <div
            class="choosePageIconBox"
            :class="{ choosePageIconBoxDark: darkFlag }"
          >
            <div
              class="pageIcon"
              v-for="(item, index) in pageIconArray"
              :key="index"
              @click="newPageIconChoose(index)"
              :class="{
                pageIconChoose: index == iconChooseFlag,
                pageIconDark: darkFlag,
                pageIconChooseDark: (index == iconChooseFlag) & darkFlag,
              }"
            >
              <span class="iconfont iconSvg" :class="item"></span>
            </div>
          </div>
          <div class="addBtnBox">
            <button @click="sendPage">确定</button>
            <button @click="addPage">取消</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 删除分页确认弹窗 -->
    <transition name="appear">
      <div
        class="addNavBg"
        v-if="this.deletePageDisflag"
        :class="{ addNavBgDark: darkFlag }"
      >
        <div
          class="addNavBox"
          style="width: 350px; height: 170px"
          :class="{ addNavBoxDark: darkFlag }"
        >
          <h2>确认删除</h2>
          <p
            class="addNavBoxP"
            style="
              text-align: center;
              font-size: 16px;
              margin: 20px 20px 0px 20px;
            "
          >
            确认删除该分页以及分页下的所有图标吗？
          </p>
          <div class="addBtnBox">
            <button @click="deletePageOK">确定</button>
            <button @click="deletePageNo">取消</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 新建图标弹窗 -->
    <transition name="appear">
      <div
        class="addNavBg"
        v-if="addLinkFlag"
        :class="{ addNavBgDark: darkFlag }"
      >
        <div
          class="addNavBox"
          style="height: 600px"
          :class="{ addNavBoxDark: darkFlag }"
        >
          <h2>新增图标</h2>
          <p class="addNavBoxP">新建图标名称：</p>
          <input
            type="text"
            class="pageNameInput"
            v-model="newLinkName"
            :style="linkInputWarn"
            :class="{ pageNameInputDark: darkFlag }"
          />
          <p class="addNavBoxP">新建图标网址：</p>
          <input
            type="text"
            class="pageNameInput"
            v-model="newLinkUrl"
            :style="linkInputWarn"
            placeholder="https://"
            :class="{ pageNameInputDark: darkFlag }"
          />
          <p class="addNavBoxP">选择分页：</p>
          <div class="linkPageChoose">
            <ul>
              <li
                class="linkPageChooseLi"
                v-for="(item, index) in navArray"
                :key="index"
                :class="{ newIconPageChoose: index == newIconPageChooseFlag }"
                @click="newIconChoosePage(index)"
              >
                {{ item.page }}
              </li>
            </ul>
          </div>
          <p class="addNavBoxP">选择颜色：</p>
          <div class="colorChooseBox">
            <div
              class="colorBox"
              style="background-color: rgb(255, 78, 78)"
              @click="changeShowColor('rgb(255, 78, 78)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #ff8400"
              @click="changeShowColor('#FF8400')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #f6c031"
              @click="changeShowColor('#FBBE23')"
            ></div>
            <div
              class="colorBox"
              style="background-color: rgb(0, 193, 64)"
              @click="changeShowColor('rgb(0, 193, 64)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #5cd1af"
              @click="changeShowColor('#5CD1AF')"
            ></div>

            <div
              class="colorBox"
              style="background-color: rgb(104, 212, 255)"
              @click="changeShowColor('rgb(104, 212, 255)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: rgb(76, 125, 248)"
              @click="changeShowColor('rgb(76, 125, 248)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #d190ef"
              @click="changeShowColor('#D190EF')"
            ></div>
            <div
              class="colorBox"
              style="background-color: rgb(255, 138, 157)"
              @click="changeShowColor('rgb(255, 138, 157)')"
            ></div>
            <div class="colorBox">
              <div class="otherColorBox">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-sehuan"></use>
                </svg>
              </div>
              <el-color-picker
                type="color"
                v-model="ownColor"
                size="mini"
                style="opacity: 0"
              >
              </el-color-picker>
            </div>
            <p style="font-size: 12px">图标样式预览：</p>
            <div class="showColorBigBox">
              <div
                class="showColorBox"
                :style="colorBoxStyle"
                @click="chooseColor()"
                :class="{ chooseColorOrImg: !this.imgChooseFlag }"
              >
                <svg class="icon" aria-hidden="true">
                  <text
                    x="25"
                    y="33"
                    :fill="fillColor"
                    text-anchor="middle"
                    font-size="28px"
                  >
                    {{ newLinkName.charAt(0) }}
                  </text>
                </svg>
                <p style="font-size: 12px">文字图标</p>
              </div>
              <div
                class="showFileBox"
                @click="chooseImg()"
                :class="{ chooseColorOrImg: this.imgChooseFlag }"
              >
                <img
                  :src="imageUrl"
                  alt=""
                  width="50px"
                  height="50px"
                  style="object-fit: cover; border-radius: 10px"
                />
                <p style="font-size: 12px">图标预览</p>
              </div>

              <div class="upFileBox" @click="chooseImg()">
                <i class="el-icon-plus">
                  <input
                    type="file"
                    @change="getFile($event)"
                    accept="image/*"
                  />
                </i>
                <p style="font-size: 12px">上传图标</p>
              </div>
            </div>
          </div>
          <transition name="nameWarn">
            <p
              class="warnP"
              v-if="linkWarnFlag"
              style="margin-left: 130px; margin-top: 5px; font-size: 12px"
            >
              图标名称或网址未输入!
            </p>
          </transition>
          <div class="addBtnBox">
            <button @click="sendLink">确定</button>
            <button @click="addLink">取消</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 右键菜单悬浮弹窗 -->
    <transition name="transMenu">
      <div
        class="rightClickMenu"
        v-if="menuFlag"
        :style="menuStyle"
        :class="{ rightClickMenuDark: darkFlag }"
      >
        <div class="rightClickMenuSmallBox" @click="addLink()">
          新增图标
          <span class="iconfont icon-zengjia"></span>
        </div>
        <div class="rightClickMenuSmallBox" @click="showChangeLink()">
          修改图标
          <span class="iconfont icon-xiugai"></span>
        </div>
        <div class="rightClickMenuSmallBox" @click="showDeleteLink()">
          删除图标
          <span class="iconfont icon-lajitongshanchu"></span>
        </div>
      </div>
    </transition>
    <!-- 修改图标弹窗 -->
    <transition name="appear">
      <div
        class="addNavBg"
        v-if="this.changeLinkFlag"
        :class="{ addNavBgDark: darkFlag }"
      >
        <div
          class="addNavBox"
          style="height: 600px"
          :class="{ addNavBoxDark: darkFlag }"
        >
          <h2>编辑图标</h2>
          <p class="addNavBoxP">更改图标名称：</p>
          <input
            type="text"
            class="pageNameInput"
            v-model="oldLinkName"
            :style="linkInputWarn"
            :class="{ pageNameInputDark: darkFlag }"
          />
          <p class="addNavBoxP">更改图标网址：</p>
          <input
            type="text"
            class="pageNameInput"
            v-model="oldLinkUrl"
            :style="linkInputWarn"
            placeholder="https://"
            :class="{ pageNameInputDark: darkFlag }"
          />
          <p class="addNavBoxP">更改分页：</p>
          <div class="linkPageChoose">
            <ul>
              <li
                class="linkPageChooseLi"
                v-for="(item, index) in navArray"
                :key="index"
                :class="{
                  newIconPageChoose: index == oldIconPageChooseFlag,
                  linkPageChooseLiDark: darkFlag,
                }"
                @click="oldIconChoosePage(index)"
              >
                {{ item.page }}
              </li>
            </ul>
          </div>
          <p class="addNavBoxP">选择颜色：</p>
          <div class="colorChooseBox">
            <div
              class="colorBox"
              style="background-color: rgb(255, 78, 78)"
              @click="changeShowColor('rgb(255, 78, 78)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #ff8400"
              @click="changeShowColor('#FF8400')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #f6c031"
              @click="changeShowColor('#FBBE23')"
            ></div>
            <div
              class="colorBox"
              style="background-color: rgb(0, 193, 64)"
              @click="changeShowColor('rgb(0, 193, 64)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #5cd1af"
              @click="changeShowColor('#5CD1AF')"
            ></div>

            <div
              class="colorBox"
              style="background-color: rgb(104, 212, 255)"
              @click="changeShowColor('rgb(104, 212, 255)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: rgb(76, 125, 248)"
              @click="changeShowColor('rgb(76, 125, 248)')"
            ></div>
            <div
              class="colorBox"
              style="background-color: #d190ef"
              @click="changeShowColor('#D190EF')"
            ></div>
            <div
              class="colorBox"
              style="background-color: rgb(255, 138, 157)"
              @click="changeShowColor('rgb(255, 138, 157)')"
            ></div>
            <div class="colorBox">
              <div class="otherColorBox">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-sehuan"></use>
                </svg>
              </div>
              <el-color-picker
                type="color"
                v-model="ownColor"
                size="mini"
                style="opacity: 0"
              >
              </el-color-picker>
            </div>
            <p style="font-size: 12px">图标样式预览：</p>
            <div class="showColorBigBox">
              <div
                class="showColorBox"
                :style="colorBoxStyle"
                @click="chooseColor()"
                :class="{ chooseColorOrImg: !this.imgChooseFlag }"
              >
                <svg class="icon" aria-hidden="true">
                  <text
                    x="25"
                    y="33"
                    :fill="fillColor"
                    text-anchor="middle"
                    font-size="28px"
                  >
                    {{ linkTotalArray[chooseLinkIndex].linkName.charAt(0) }}
                  </text>
                </svg>
                <p style="font-size: 12px">文字图标</p>
              </div>

              <div
                class="showFileBox"
                @click="chooseImg()"
                :class="{ chooseColorOrImg: this.imgChooseFlag }"
              >
                <img
                  v-if="this.imageUrl"
                  :src="this.imageUrl"
                  alt=""
                  width="50px"
                  height="50px"
                  style="object-fit: cover; border-radius: 10px"
                />
                <svg v-if="!this.imageUrl" class="icon" aria-hidden="true">
                  <use :xlink:href="linkTotalArray[chooseLinkIndex].icon"></use>
                </svg>
                <p style="font-size: 12px">图标预览</p>
              </div>

              <div class="upFileBox" @click="chooseImg()">
                <i class="el-icon-plus">
                  <input
                    type="file"
                    @change="getFile($event)"
                    accept=".jpg,.gif,.png,.bmp"
                  />
                </i>
                <p style="font-size: 12px">上传图标</p>
              </div>
            </div>
          </div>
          <transition name="nameWarn">
            <p
              class="warnP"
              v-if="linkWarnFlag"
              style="margin-left: 130px; margin-top: 5px; font-size: 12px"
            >
              图标名称或网址未输入!
            </p>
          </transition>
          <div class="addBtnBox">
            <button @click="showChangeLinkOK">确定</button>
            <button @click="showChangeLinkNO">
              取消
            </button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 删除图标确认弹窗 -->
    <transition name="appear">
      <div
        class="addNavBg"
        v-if="this.deleteLinkFlag"
        :class="{ addNavBgDark: darkFlag }"
      >
        <div
          class="addNavBox"
          style="height: 170px"
          :class="{ addNavBoxDark: darkFlag }"
        >
          <h2>确认删除</h2>
          <p
            class="addNavBoxP"
            style="text-align: center; margin: 20px 20px 0px 20px;font-size: 16px"
          >
            确认删除该图标吗？
          </p>
          <div class="addBtnBox">
            <button @click="deleteLinkOK()">确定</button>
            <button @click="showDeleteLink()">取消</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
//导入draggable组件
import draggable from "vuedraggable";
import bus from "../bus";
import axios from "axios";
import md5 from "js-md5";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      // 用户头像
      // headIcon: require("@/assets/logo.png"),
      userName: "登录",
      loginSuccess: false,
      // 导航栏
      navArray: [
        { page: "主页", icon: "icon-zhuye" },
        { page: "学习", icon: "icon-xuexi" },
        { page: "工具", icon: "icon-changyonggongju2" },
        { page: "娱乐", icon: "icon-yuleAPP" },
        { page: "视频", icon: "icon-shipin" },
        { page: "程序员", icon: "icon-daima" },
        { page: "购物", icon: "icon-gouwuchexuanzhong" },
      ],
      // 默认导航栏
      navDefaultArray: [
        { page: "主页", icon: "icon-zhuye" },
        { page: "学习", icon: "icon-xuexi" },
        { page: "工具", icon: "icon-changyonggongju2" },
        { page: "娱乐", icon: "icon-yuleAPP" },
        { page: "视频", icon: "icon-shipin" },
        { page: "程序员", icon: "icon-daima" },
        { page: "购物", icon: "icon-gouwuchexuanzhong" },
      ],
      // 当前选择的分页
      page: "主页",
      pageIndex: 0,
      // 新建分页
      addflag: false,
      warnFlag: false,
      iconChooseFlag: 0,
      newPageName: "",
      // 删除分页
      deletePageDisflag: false,
      deletePageName: "",
      deletePageIndex: 999,
      pageInputWarn: {
        border: "",
      },
      linkInputWarn: {
        border: "",
      },
      // 分页图标库
      pageIconArray: [
        "icon-biaoxing",
        "icon-dianpu",
        "icon-jushoucang",
        "icon-shijian",
        "icon-pengyou",
        "icon-wodefankui",
        "icon-gonglve",
        "icon-zuji",
        "icon-gouwuche",
        "icon-xiafan",
        "icon-yijianfankui",
        "icon-zhaoxiangji",
        "icon-danpin",
        "icon-huwai",
        "icon-jujia",
        "icon-tequanzhuanshu",
        "icon-UI",
        "icon-bianjiwenzi",
        "icon-feiji",
        "icon-shujuku",
        "icon-tuse",
        "icon-wenjian",
        "icon-zhuye",
        "icon-xuexi",
        "icon-changyonggongju2",
        "icon-yuleAPP",
        "icon-shipin",
        "icon-daima",
        "icon-gouwuchexuanzhong",
      ],
      // 快捷图标
      linkTotalArray: [
        // 主页
        {
          page: "主页",
          icon: "#icon-bilibili1",
          url: "http://www.bilibili.com/",
          linkName: "哔哩哔哩",
        },
        {
          page: "主页",
          icon: "#icon-douyin",
          url: "https://www.douyin.com/",
          linkName: "抖音",
        },
        {
          page: "主页",
          icon: "#icon-taobao",
          url: "https://www.taobao.com/",
          linkName: "淘宝",
        },
        {
          page: "主页",
          icon: "#icon-jingdong",
          url: "https://www.jd.com/",
          linkName: "京东",
        },
        {
          page: "主页",
          icon: "#icon-weibo",
          url: "https://m.weibo.cn/",
          linkName: "微博",
        },
        {
          page: "主页",
          icon: "#icon-wangyiyun",
          url: "https://music.163.com/",
          linkName: "网易云音乐",
        },
        {
          page: "主页",
          icon: "#icon-baidufanyi",
          url: "https://fanyi.baidu.com/",
          linkName: "百度翻译",
        },
        {
          page: "主页",
          icon: "#icon-chaoxing",
          url: "https://i.mooc.chaoxing.com/",
          linkName: "学习通",
        },

        // 学习
        {
          page: "学习",
          icon: "#icon-chaoxing",
          url: "https://i.mooc.chaoxing.com/",
          linkName: "学习通",
        },
        {
          page: "学习",
          icon: "#icon-zhongguodaxueMOOC",
          url: "https://www.icourse163.org/",
          linkName: "中国大学MOOC",
        },
        {
          page: "学习",
          icon: "#icon--yuketang-copy",
          url: "https://changjiang.yuketang.cn/web",
          linkName: "长江雨课堂",
        },
        {
          page: "学习",
          icon: "#icon-tubiaozhizuomoban",
          url: "https://www.xuetangx.com/",
          linkName: "学堂在线",
        },
        {
          page: "学习",
          icon: "#icon-baidubaike",
          url: "https://baike.baidu.com/",
          linkName: "百度百科",
        },
        {
          page: "学习",
          icon: "#icon-weijibaike",
          url: "https://zh.wikipedia.org/zh/%E7%BB%B4%E5%9F%BA%E7%99%BE%E7%A7%91",
          linkName: "维基百科",
        },
        {
          page: "学习",
          icon: "#icon-zhiwang",
          url: "https://www.cnki.net/",
          linkName: "中国知网",
        },
        {
          page: "学习",
          icon: "#icon-crown-key",
          url: "https://sci-hub.et-fine.com/",
          linkName: "Sci-Hub",
        },

        // 工具
        {
          page: "工具",
          icon: "#icon-QQyouxiang",
          url: "https://mail.qq.com",
          linkName: "QQ邮箱",
        },
        {
          page: "工具",
          icon: "#icon-baiduyunpan",
          url: "http://pan.baidu.com/",
          linkName: "百度网盘",
        },
        {
          page: "工具",
          icon: "#icon-baidufanyi",
          url: "https://fanyi.baidu.com/",
          linkName: "百度翻译",
        },
        {
          page: "工具",
          icon: "#icon-youdaofanyi",
          url: "https://fanyi.youdao.com/index.html#/",
          linkName: "有道翻译",
        },
        {
          page: "工具",
          icon: "#icon-a-12306",
          url: "https://www.12306.cn/index/",
          linkName: "中国铁路12306",
        },
        {
          page: "工具",
          icon: "#icon-xiecheng",
          url: "https://www.ctrip.com/",
          linkName: "携程",
        },
        {
          page: "工具",
          icon: "#icon-feizhu",
          url: "https://www.fliggy.com/?ttid=seo.000000580&seoType=origin",
          linkName: "飞猪旅行",
        },
        {
          page: "工具",
          icon: "#icon-baiduditu",
          url: "https://map.baidu.com/",
          linkName: "百度地图",
        },

        // 视频
        {
          page: "视频",
          icon: "#icon-bilibili1",
          url: "http://www.bilibili.com/",
          linkName: "哔哩哔哩",
        },
        {
          page: "视频",
          icon: "#icon-douyin",
          url: "https://www.douyin.com/",
          linkName: "抖音",
        },
        {
          page: "视频",
          icon: "#icon-kuaishou",
          url: "https://www.kuaishou.com/new-reco",
          linkName: "快手",
        },
        {
          page: "视频",
          icon: "#icon-tengxunshipin",
          url: "https://v.qq.com/",
          linkName: "腾讯视频",
        },
        {
          page: "视频",
          icon: "#icon-aiqiyi",
          url: "https://www.iqiyi.com/",
          linkName: "爱奇艺",
        },
        {
          page: "视频",
          icon: "#icon-youku",
          url: "https://youku.com/channel/webhome",
          linkName: "优酷",
        },
        {
          page: "视频",
          icon: "#icon-huya",
          url: "https://youku.com/channel/webhome",
          linkName: "虎牙直播",
        },
        {
          page: "视频",
          icon: "#icon-douyu",
          url: "https://youku.com/channel/webhome",
          linkName: "斗鱼直播",
        },
        {
          page: "视频",
          icon: "#icon-youtube",
          url: "https://www.youtube.com/",
          linkName: "YouTube",
        },

        // 程序员
        {
          page: "程序员",
          icon: "#icon-GitHub",
          url: "https://github.com/",
          linkName: "Github",
        },
        {
          page: "程序员",
          icon: "#icon-csdn",
          url: "https://www.cnki.net/",
          linkName: "CSDN",
        },
        {
          page: "程序员",
          icon: "#icon-gitee",
          url: "https://gitee.com/",
          linkName: "Gitee",
        },
        {
          page: "程序员",
          icon: "#icon-juejin",
          url: "https://juejin.cn/",
          linkName: "稀土掘金",
        },
        {
          page: "程序员",
          icon: "#icon-logo",
          url: "https://www.runoob.com/",
          linkName: "菜鸟教程",
        },
        {
          page: "程序员",
          icon: "#icon-a-w3schoolzaixianjiaocheng1",
          url: "https://www.w3school.com.cn/index.html",
          linkName: "w3school教程",
        },
        {
          page: "程序员",
          icon: "#icon-cnblogs",
          url: "https://www.cnblogs.com/",
          linkName: "博客园",
        },
        {
          page: "程序员",
          icon: "#icon-leetcode",
          url: "https://leetcode.cn/",
          linkName: "力扣",
        },
        {
          page: "程序员",
          icon: "#icon-mdn",
          url: "https://developer.mozilla.org/zh-CN/",
          linkName: "MDN",
        },
        {
          page: "程序员",
          icon: "#icon-java",
          url: "https://www.java.com/zh-CN/",
          linkName: "Java",
        },
        {
          page: "程序员",
          icon: "#icon-Python",
          url: "https://www.python.org/",
          linkName: "Python",
        },
        {
          page: "程序员",
          icon: "#icon-zonghenengyuanfuwupingtaikuangjiaicon-",
          url: "https://cloud.tencent.com/",
          linkName: "腾讯云",
        },
        {
          page: "程序员",
          icon: "#icon-Aliyun",
          url: "https://cn.aliyun.com/",
          linkName: "阿里云",
        },
        {
          page: "程序员",
          icon: "#icon-Vue",
          url: "https://cn.vuejs.org/",
          linkName: "Vue",
        },
        {
          page: "程序员",
          icon: "#icon-react",
          url: "https://react.docschina.org/",
          linkName: "React",
        },
        {
          page: "程序员",
          icon: "#icon-elementui",
          url: "https://element.eleme.cn/#/zh-CN",
          linkName: "Element",
        },
        {
          page: "程序员",
          icon: "#icon-uni-app",
          url: "https://uniapp.dcloud.net.cn/",
          linkName: "uniapp",
        },
        {
          page: "程序员",
          icon: "#icon-typescript_",
          url: "https://www.typescriptlang.org/",
          linkName: "TypeScript",
        },
        {
          page: "程序员",
          icon: "#icon-Oracle",
          url: "https://www.oracle.com/cn/",
          linkName: "Oracle",
        },

        // 购物
        {
          page: "购物",
          icon: "#icon-taobao",
          url: "https://www.taobao.com/",
          linkName: "淘宝",
        },
        {
          page: "购物",
          icon: "#icon-jingdong",
          url: "https://www.jd.com/",
          linkName: "京东",
        },
        {
          page: "购物",
          icon: "#icon-tianmao",
          url: "https://www.tmall.com/",
          linkName: "天猫",
        },
        {
          page: "购物",
          icon: "#icon-suningyigou",
          url: "https://www.suning.com/",
          linkName: "苏宁易购",
        },
        {
          page: "购物",
          icon: "#icon-alibaba",
          url: "https://www.1688.com/",
          linkName: "阿里巴巴",
        },

        // 娱乐
        {
          page: "娱乐",
          icon: "#icon-weibo",
          url: "https://m.weibo.cn/",
          linkName: "微博",
        },
        {
          page: "娱乐",
          icon: "#icon-zhihu",
          url: "https://www.zhihu.com/signin?next=%2F",
          linkName: "知乎",
        },
        {
          page: "娱乐",
          icon: "#icon-jinritoutiao",
          url: "https://www.toutiao.com/",
          linkName: "今日头条",
        },
        {
          page: "娱乐",
          icon: "#icon-douban",
          url: "https://www.douban.com/",
          linkName: "豆瓣",
        },
        {
          page: "娱乐",
          icon: "#icon-wangyiyun",
          url: "https://music.163.com/",
          linkName: "网易云音乐",
        },
        {
          page: "娱乐",
          icon: "#icon-QQyinle",
          url: "https://y.qq.com/",
          linkName: "QQ音乐",
        },
        {
          page: "娱乐",
          icon: "#icon-a-kugou1",
          url: "https://www.kugou.com/",
          linkName: "酷狗音乐",
        },
        {
          page: "娱乐",
          icon: "#icon-steam",
          url: "https://store.steampowered.com/",
          linkName: "Steam",
        },
        {
          page: "娱乐",
          icon: "#icon-twiter",
          url: "https://twitter.com/",
          linkName: "Twitter",
        },
      ],
      // 默认快捷图标库
      linkDefaultList: [
        // 主页
        {
          page: "主页",
          icon: "#icon-bilibili1",
          url: "http://www.bilibili.com/",
          linkName: "哔哩哔哩",
        },
        {
          page: "主页",
          icon: "#icon-douyin",
          url: "https://www.douyin.com/",
          linkName: "抖音",
        },
        {
          page: "主页",
          icon: "#icon-taobao",
          url: "https://www.taobao.com/",
          linkName: "淘宝",
        },
        {
          page: "主页",
          icon: "#icon-jingdong",
          url: "https://www.jd.com/",
          linkName: "京东",
        },
        {
          page: "主页",
          icon: "#icon-weibo",
          url: "https://m.weibo.cn/",
          linkName: "微博",
        },
        {
          page: "主页",
          icon: "#icon-wangyiyun",
          url: "https://music.163.com/",
          linkName: "网易云音乐",
        },
        {
          page: "主页",
          icon: "#icon-baidufanyi",
          url: "https://fanyi.baidu.com/",
          linkName: "百度翻译",
        },
        {
          page: "主页",
          icon: "#icon-chaoxing",
          url: "https://i.mooc.chaoxing.com/",
          linkName: "学习通",
        },

        // 学习
        {
          page: "学习",
          icon: "#icon-chaoxing",
          url: "https://i.mooc.chaoxing.com/",
          linkName: "学习通",
        },
        {
          page: "学习",
          icon: "#icon-zhongguodaxueMOOC",
          url: "https://www.icourse163.org/",
          linkName: "中国大学MOOC",
        },
        {
          page: "学习",
          icon: "#icon--yuketang-copy",
          url: "https://changjiang.yuketang.cn/web",
          linkName: "长江雨课堂",
        },
        {
          page: "学习",
          icon: "#icon-tubiaozhizuomoban",
          url: "https://www.xuetangx.com/",
          linkName: "学堂在线",
        },
        {
          page: "学习",
          icon: "#icon-baidubaike",
          url: "https://baike.baidu.com/",
          linkName: "百度百科",
        },
        {
          page: "学习",
          icon: "#icon-weijibaike",
          url: "https://zh.wikipedia.org/zh/%E7%BB%B4%E5%9F%BA%E7%99%BE%E7%A7%91",
          linkName: "维基百科",
        },
        {
          page: "学习",
          icon: "#icon-zhiwang",
          url: "https://www.cnki.net/",
          linkName: "中国知网",
        },
        {
          page: "学习",
          icon: "#icon-crown-key",
          url: "https://sci-hub.et-fine.com/",
          linkName: "Sci-Hub",
        },

        // 工具
        {
          page: "工具",
          icon: "#icon-QQyouxiang",
          url: "https://mail.qq.com",
          linkName: "QQ邮箱",
        },
        {
          page: "工具",
          icon: "#icon-baiduyunpan",
          url: "http://pan.baidu.com/",
          linkName: "百度网盘",
        },
        {
          page: "工具",
          icon: "#icon-baidufanyi",
          url: "https://fanyi.baidu.com/",
          linkName: "百度翻译",
        },
        {
          page: "工具",
          icon: "#icon-youdaofanyi",
          url: "https://fanyi.youdao.com/index.html#/",
          linkName: "有道翻译",
        },
        {
          page: "工具",
          icon: "#icon-a-12306",
          url: "https://www.12306.cn/index/",
          linkName: "中国铁路12306",
        },
        {
          page: "工具",
          icon: "#icon-xiecheng",
          url: "https://www.ctrip.com/",
          linkName: "携程",
        },
        {
          page: "工具",
          icon: "#icon-feizhu",
          url: "https://www.fliggy.com/?ttid=seo.000000580&seoType=origin",
          linkName: "飞猪旅行",
        },
        {
          page: "工具",
          icon: "#icon-baiduditu",
          url: "https://map.baidu.com/",
          linkName: "百度地图",
        },

        // 视频
        {
          page: "视频",
          icon: "#icon-bilibili1",
          url: "http://www.bilibili.com/",
          linkName: "哔哩哔哩",
        },
        {
          page: "视频",
          icon: "#icon-douyin",
          url: "https://www.douyin.com/",
          linkName: "抖音",
        },
        {
          page: "视频",
          icon: "#icon-kuaishou",
          url: "https://www.kuaishou.com/new-reco",
          linkName: "快手",
        },
        {
          page: "视频",
          icon: "#icon-tengxunshipin",
          url: "https://v.qq.com/",
          linkName: "腾讯视频",
        },
        {
          page: "视频",
          icon: "#icon-aiqiyi",
          url: "https://www.iqiyi.com/",
          linkName: "爱奇艺",
        },
        {
          page: "视频",
          icon: "#icon-youku",
          url: "https://youku.com/channel/webhome",
          linkName: "优酷",
        },
        {
          page: "视频",
          icon: "#icon-huya",
          url: "https://youku.com/channel/webhome",
          linkName: "虎牙直播",
        },
        {
          page: "视频",
          icon: "#icon-douyu",
          url: "https://youku.com/channel/webhome",
          linkName: "斗鱼直播",
        },
        {
          page: "视频",
          icon: "#icon-youtube",
          url: "https://www.youtube.com/",
          linkName: "YouTube",
        },

        // 程序员
        {
          page: "程序员",
          icon: "#icon-GitHub",
          url: "https://github.com/",
          linkName: "Github",
        },
        {
          page: "程序员",
          icon: "#icon-csdn",
          url: "https://www.cnki.net/",
          linkName: "CSDN",
        },
        {
          page: "程序员",
          icon: "#icon-gitee",
          url: "https://gitee.com/",
          linkName: "Gitee",
        },
        {
          page: "程序员",
          icon: "#icon-juejin",
          url: "https://juejin.cn/",
          linkName: "稀土掘金",
        },
        {
          page: "程序员",
          icon: "#icon-logo",
          url: "https://www.runoob.com/",
          linkName: "菜鸟教程",
        },
        {
          page: "程序员",
          icon: "#icon-a-w3schoolzaixianjiaocheng1",
          url: "https://www.w3school.com.cn/index.html",
          linkName: "w3school教程",
        },
        {
          page: "程序员",
          icon: "#icon-cnblogs",
          url: "https://www.cnblogs.com/",
          linkName: "博客园",
        },
        {
          page: "程序员",
          icon: "#icon-leetcode",
          url: "https://leetcode.cn/",
          linkName: "力扣",
        },
        {
          page: "程序员",
          icon: "#icon-mdn",
          url: "https://developer.mozilla.org/zh-CN/",
          linkName: "MDN",
        },
        {
          page: "程序员",
          icon: "#icon-java",
          url: "https://www.java.com/zh-CN/",
          linkName: "Java",
        },
        {
          page: "程序员",
          icon: "#icon-Python",
          url: "https://www.python.org/",
          linkName: "Python",
        },
        {
          page: "程序员",
          icon: "#icon-zonghenengyuanfuwupingtaikuangjiaicon-",
          url: "https://cloud.tencent.com/",
          linkName: "腾讯云",
        },
        {
          page: "程序员",
          icon: "#icon-Aliyun",
          url: "https://cn.aliyun.com/",
          linkName: "阿里云",
        },
        {
          page: "程序员",
          icon: "#icon-Vue",
          url: "https://cn.vuejs.org/",
          linkName: "Vue",
        },
        {
          page: "程序员",
          icon: "#icon-react",
          url: "https://react.docschina.org/",
          linkName: "React",
        },
        {
          page: "程序员",
          icon: "#icon-elementui",
          url: "https://element.eleme.cn/#/zh-CN",
          linkName: "Element",
        },
        {
          page: "程序员",
          icon: "#icon-uni-app",
          url: "https://uniapp.dcloud.net.cn/",
          linkName: "uniapp",
        },
        {
          page: "程序员",
          icon: "#icon-typescript_",
          url: "https://www.typescriptlang.org/",
          linkName: "TypeScript",
        },
        {
          page: "程序员",
          icon: "#icon-Oracle",
          url: "https://www.oracle.com/cn/",
          linkName: "Oracle",
        },

        // 购物
        {
          page: "购物",
          icon: "#icon-taobao",
          url: "https://www.taobao.com/",
          linkName: "淘宝",
        },
        {
          page: "购物",
          icon: "#icon-jingdong",
          url: "https://www.jd.com/",
          linkName: "京东",
        },
        {
          page: "购物",
          icon: "#icon-tianmao",
          url: "https://www.tmall.com/",
          linkName: "天猫",
        },
        {
          page: "购物",
          icon: "#icon-suningyigou",
          url: "https://www.suning.com/",
          linkName: "苏宁易购",
        },
        {
          page: "购物",
          icon: "#icon-alibaba",
          url: "https://www.1688.com/",
          linkName: "阿里巴巴",
        },

        // 娱乐
        {
          page: "娱乐",
          icon: "#icon-weibo",
          url: "https://m.weibo.cn/",
          linkName: "微博",
        },
        {
          page: "娱乐",
          icon: "#icon-zhihu",
          url: "https://www.zhihu.com/signin?next=%2F",
          linkName: "知乎",
        },
        {
          page: "娱乐",
          icon: "#icon-jinritoutiao",
          url: "https://www.toutiao.com/",
          linkName: "今日头条",
        },
        {
          page: "娱乐",
          icon: "#icon-douban",
          url: "https://www.douban.com/",
          linkName: "豆瓣",
        },
        {
          page: "娱乐",
          icon: "#icon-wangyiyun",
          url: "https://music.163.com/",
          linkName: "网易云音乐",
        },
        {
          page: "娱乐",
          icon: "#icon-QQyinle",
          url: "https://y.qq.com/",
          linkName: "QQ音乐",
        },
        {
          page: "娱乐",
          icon: "#icon-a-kugou1",
          url: "https://www.kugou.com/",
          linkName: "酷狗音乐",
        },
        {
          page: "娱乐",
          icon: "#icon-steam",
          url: "https://store.steampowered.com/",
          linkName: "Steam",
        },
        {
          page: "娱乐",
          icon: "#icon-twiter",
          url: "https://twitter.com/",
          linkName: "Twitter",
        },
      ],
      // 更新图标数组
      newLinkTotalArray: "",
      // 新建图标
      addLinkFlag: false,
      newLinkName: "",
      newLinkUrl: "",
      linkWarnFlag: false,
      newIconPageChooseFlag: 0,
      ownColor: "",
      colorBoxStyle: {
        backgroundColor: "#fdaf27",
      },
      imgChooseFlag: false,
      imageUrl: "",
      dialogVisible: false,
      fillColor: "#fff",
      // 右键图标弹窗
      menuFlag: false,
      menuStyle: {
        top: "0",
        left: "0",
      },
      // 删除图标
      deleteLinkFlag: false,
      chooseLinkIndex: 99999,
      changeLinkFlag: false,
      // 修改图标
      oldIconPageChooseFlag: 0,
      oldLinkName: "",
      oldLinkUrl: "",
      oldLinkColor: "",
      oldLinkImg: "",
      oldLinkIcon: "",
      // 夜间
      // darkFlag: true,
      user_id: -99999,
      nav_id: -99999,
      link_id: -99999,
      localLinkArray: [],
      locid: -99999,
      firstLogin: false,
      base64Url: "",
    };
  },
  computed: {
    darkFlag() {
      return this.$store.state.darkFlag;
    },
  },
  watch: {
    // 颜色预览
    ownColor: {
      handler() {
        this.colorBoxStyle.backgroundColor = this.ownColor;
      },
    },
    darkFlag: {
      handler() {
        if (!this.darkFlag) {
          this.fillColor = "#363636";
        } else {
          this.fillColor = "#fff";
        }
      },
    },
    user_id: {
      handler() {
        // 判断是否为第一次登录，第一次登录从数据库中读取数据
        this.firstLogin = JSON.parse(window.localStorage.getItem("firstLogin"));
        if (!this.firstLogin & (this.user_id != -99999)) {
          this.firstLogin = true;
          window.localStorage.setItem(
            "firstLogin",
            JSON.stringify(this.firstLogin)
          );
          // 登录状态下获取数据库中的数据
          // 删除所有分页接口以及图标
          this.navArray = [];
          this.linkTotalArray = [];
          // 获取所有分页接口
          axios
            .get(this.$baseUrl + "/getNavArray", {
              params: {
                user_id: this.user_id,
              },
            })
            .then((response) => {
              // console.log(response);
              for (let i = 0; i <= response.data.length; i++) {
                let obj = {
                  nav_id: response.data[i].nav_id,
                  page: response.data[i].page,
                  icon: response.data[i].icon,
                };
                this.navArray.push(obj);
                obj = {};
              }
            })
            .catch(function () {
              return;
            });
          // 添加所有图标接口
          axios
            .get(this.$baseUrl + "/getAllLink", {
              params: {
                user_id: this.user_id,
              },
            })
            .then((response) => {
              // console.log(response);
              for (let i = 0; i <= response.data.length; i++) {
                let obj = {
                  link_id: response.data[i].link_id,
                  page: response.data[i].page,
                  url: response.data[i].url,
                  linkName: response.data[i].linkName,
                  icon: response.data[i].icon,
                  color: response.data[i].color,
                  img: response.data[i].img,
                };
                this.linkTotalArray.push(obj);
                obj = {};
              }
            })
            .catch(function () {
              return;
            });
        } else if (this.user_id != -99999) {
          this.navArray = [];
          // 获取所有分页接口
          axios
            .get(this.$baseUrl + "/getNavArray", {
              params: {
                user_id: this.user_id,
              },
            })
            .then((response) => {
              // console.log(response);
              for (let i = 0; i <= response.data.length; i++) {
                let obj = {
                  nav_id: response.data[i].nav_id,
                  page: response.data[i].page,
                  icon: response.data[i].icon,
                };
                this.navArray.push(obj);
                obj = {};
              }
            })
            .catch(function () {
              return;
            });
        } else {
          this.navArray = this.navDefaultArray;
          window.localStorage.setItem(
            "local",
            JSON.stringify(this.linkDefaultList)
          );
          let locList = JSON.parse(window.localStorage.getItem("local"));
          this.linkTotalArray = locList;
        }
      },
    },
  },

  mounted() {
    // const md5Script = document.createElement("script");
    // md5Script.type = "text/javascript";
    // md5Script.src =
    //   "https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js";
    // document.body.appendChild(md5Script);
    // 天气模块
    window.WIDGET = {
      CONFIG: {
        layout: "1",
        width: "370",
        height: "150",
        background: "1",
        dataColor: "FFFFFF",
        borderRadius: "20",
        key: "129e84c765094388b911e4a92da3c22e",
      },
    };
    const weatherScript = document.createElement("script");
    weatherScript.type = "text/javascript";
    weatherScript.src =
      "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.body.appendChild(weatherScript);

    // 获取user_id
    bus.$on("useridFlag", (id) => {
      this.user_id = id;
    });
    // 接收用户名
    bus.$on("userNameFlag", (userName, flag) => {
      this.userName = userName;
      this.loginSuccess = flag;
      if (!flag) {
        // 用户登出后，设置缓存为默认状态，并重新渲染
        window.localStorage.setItem(
          "local",
          JSON.stringify(this.linkDefaultList)
        );
        let locList = JSON.parse(window.localStorage.getItem("local"));
        this.linkTotalArray = locList;
        // console.log(1);
        // console.log(this.linkTotalArray);
      }
    });
    // 设置更改夜间模式
    bus.$on("darkFlagOK", (flag) => {
      this.darkFlag = !flag;
      bus.$emit("darkFlag", flag);
    });
    let locList1 = JSON.parse(window.localStorage.getItem("local"));
    if (!locList1 || locList1.length == 0) {
      locList1 = this.linkDefaultList;
      this.linkTotalArray = locList1;
    } else {
      this.linkTotalArray = locList1;
      // console.log(2);
      // console.log(this.linkTotalArray);
    }
  },
  methods: {
    // 打开右侧侧拉框
    rightListOn() {
      bus.$emit("rightListFlag", true);
    },
    // 快捷链接跳转
    jumpUrl(element) {
      window.open(element.url);
    },
    // 切换页面
    changePage(newPage, index) {
      this.page = newPage;
      this.pageIndex = index;
      this.oldIconPageChooseFlag = this.pageIndex;
      this.rightListOn();
    },
    // 图标展示过滤
    showItem(newPage) {
      if (this.page == newPage) {
        return true;
      } else {
        return false;
      }
    },
    // 新建分页弹窗
    addPage() {
      // if(this.user_id==-99999){
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.newPageName = "";
      this.addflag = !this.addflag;
      this.pageInputWarn.border = "";
      if ((this.warnFlag = true)) {
        this.warnFlag = !this.warnFlag;
      }
    },
    // 新建分页
    sendPage() {
      if (this.newPageName == "") {
        this.warnFlag = !this.warnFlag;
        this.pageInputWarn.border = "1.25px solid red";
      } else {
        let pageObj = {
          page: this.newPageName,
          icon: this.pageIconArray[this.iconChooseFlag],
        };
        this.navArray.push(pageObj);
        // 新建单个分页接口
        axios
          .get(this.$baseUrl + "/addOneNav", {
            params: {
              user_id: this.user_id,
              page: this.newPageName,
              icon: this.pageIconArray[this.iconChooseFlag],
            },
          })
          .then((response) => {
            // console.log("删除成功");
            // console.log(response);
          })
          .catch((err) => {
            console.log(err);
          });
        this.addPage();
      }
    },
    // 新建分页图标选择
    newPageIconChoose(index) {
      this.iconChooseFlag = index;
    },
    // 删除分页
    deletePage(page, index) {
      // if(this.user_id==-99999){
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.deletePageDisflag = true;
      this.deletePageName = page;
      this.deletePageIndex = index;
    },
    // 确认删除分页
    deletePageOK() {
      this.nav_id = this.navArray[this.deletePageIndex].nav_id;
      if (this.deletePageIndex != 0) {
        if (this.navArray[this.deletePageIndex].page == this.deletePageName) {
          this.navArray.splice(this.deletePageIndex, 1);
          this.linkTotalArray = this.linkTotalArray.filter((item) => {
            return item.page != this.deletePageName;
          });
          this.page = "主页";
        }
      }
      // 删除单个分页接口
      axios
        .get(this.$baseUrl + "/deleteOneNavArray", {
          params: {
            user_id: this.user_id,
            nav_id: this.nav_id,
          },
        })
        .then((response) => {
          // console.log("删除成功");
          // console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });
      // 删除一个分页下所有图标接口
      axios
        .get(this.$baseUrl + "/deleteOneNavLink", {
          params: {
            user_id: this.user_id,
            page: this.deletePageName,
          },
        })
        .then((response) => {
          // console.log("删除成功");
          // console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });

      window.localStorage.setItem("local", JSON.stringify(this.linkTotalArray));
      this.deletePageNo();
    },
    // 取消删除分页
    deletePageNo() {
      this.deletePageDisflag = false;
      this.deletePageName = "";
      this.deletePageIndex = 999;
    },
    // 新建图标弹窗
    addLink() {
      this.menuFlag = false;
      // if(this.user_id==-99999){
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.newLinkName = "";
      this.newLinkUrl = "";
      this.colorBoxStyle.backgroundColor = "#fabe26";
      this.addLinkFlag = !this.addLinkFlag;
      this.linkInputWarn.border = "";
      this.newIconPageChooseFlag = 0;
      this.linkWarnFlag = false;
      this.linkInputWarn.border = "1.25px solid transparent !important";
      this.imgChooseFlag = false;
      this.imageUrl = "";
    },
    // compressImg(base64, multiple, linkObj) {
    //   // 第一个参数就是需要加密的base64，
    //   // 第二个是压缩系数 0-1，
    //   // 第三个压缩后的回调 用来获取处理后的 base64
    //   if (!base64) {
    //     return;
    //   }
    //   const that = this;
    //   const length = base64.length / 1024;
    //   // 压缩方法
    //   let newImage = new Image();
    //   let quality = 0.6; // 压缩系数0-1之间
    //   newImage.src = base64;
    //   newImage.setAttribute("crossOrigin", "Anonymous"); // url为外域时需要
    //   let imgWidth, imgHeight;
    //   let w = undefined;
    //   newImage.onload = function () {
    //     // 这里面的 this 指向 newImage
    //     // 通过改变图片宽高来实现压缩
    //     w = this.width * multiple;
    //     imgWidth = this.width;
    //     imgHeight = this.height;
    //     let canvas = document.createElement("canvas");
    //     let ctx = canvas.getContext("2d");
    //     if (Math.max(imgWidth, imgHeight) > w) {
    //       if (imgWidth > imgHeight) {
    //         canvas.width = w;
    //         // 等比例缩小
    //         canvas.height = w * (imgHeight / imgWidth);
    //       } else {
    //         canvas.height = w;
    //         // 等比例缩小
    //         canvas.width = w * (imgWidth / imgHeight);
    //       }
    //     } else {
    //       canvas.width = imgWidth;
    //       canvas.height = imgHeight;
    //       // quality 设置转换为base64编码后图片的质量，取值范围为0-1  没什么压缩效果
    //       // 还是得通过设置 canvas 的宽高来压缩
    //       quality = 0.6;
    //     }
    //     ctx.clearRect(0, 0, canvas.width, canvas.height);
    //     ctx.drawImage(this, 0, 0, canvas.width, canvas.height); //  // 这里面的 this 指向 newImage
    //     let smallBase64 = canvas.toDataURL("image/jpeg", quality); // 压缩语句
    //     // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
    //     // while (smallBase64.length / 1024 > 150) {
    //     // quality -= 0.01;
    //     // smallBase64 = canvas.toDataURL("image/jpeg", quality);
    //     // }
    //     // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
    //     // while (smallBase64.length / 1024 < 50) {
    //     // quality += 0.001;
    //     // smallBase64 = canvas.toDataURL("image/jpeg", quality);
    //     // }

    //     // 必须通过回调函数返回，否则无法及时拿到该值，回调函数异步执行
    //     // console.log(`压缩前：${length}KB`)
    //     // console.log(`压缩后：${smallBase64.length / 1024} KB`)
    //     // console.log(1);
    //     // useImg(smallBase64, linkObj);
    //     // console.log(2);
    //     linkObj.img = smallBase64;
    //     console.log("压缩后的 base64 :", linkObj.img);
    //     // console.log(base64);
    //     // console.log(typeof(linkObj.img));
    //     let user_id = JSON.parse(window.localStorage.getItem("locid"));
    //     console.log(
    //       user_id,
    //       linkObj.page,
    //       linkObj.url,
    //       linkObj.linkName,
    //       linkObj.img
    //     );
    //     axios
    //       .post("http://localhost:8080/addOneLinkImg", {
    //         user_id: user_id,
    //         page: linkObj.page,
    //         url: linkObj.url,
    //         linkName: linkObj.linkName,
    //         img: linkObj.img,
    //       })
    //       .then((response) => {
    //         console.log(4);
    //         // console.log(response);
    //         return;
    //       })
    //       .catch(function () {
    //         return;
    //       });
    //     that.addLink();
    //   };
    // },
    // useImg(base64, linkObj) {
    //   console.log(3);
    //   // this.base64Url = base64
    //   //   console.log(this.base64Url);
    //   // targetObj 通过值引用的特性  用处理后的 base64 覆盖 处理前的 base64
    //   linkObj.img = base64;
    //   console.log("压缩后的 base64 :", linkObj.img);
    //   // console.log(base64);
    //   // console.log(typeof(linkObj.img));
    //   let user_id = JSON.parse(window.localStorage.getItem("locid"));
    //   console.log(
    //     user_id,
    //     linkObj.page,
    //     linkObj.url,
    //     linkObj.linkName,
    //     linkObj.img
    //   );
    //   axios
    //     .post("http://localhost:8080/addOneLinkImg", {
    //       user_id: user_id,
    //       page: linkObj.page,
    //       url: linkObj.url,
    //       linkName: linkObj.linkName,
    //       img: linkObj.img,
    //     })
    //     .then((response) => {
    //       console.log(4);
    //       // console.log(response);
    //       return;
    //     })
    //     .catch(function () {
    //       return;
    //     });
    //   this.addLink();
    // },

    // 新建图标
    sendLink() {
      if ((this.newLinkUrl == "") | (this.newLinkName == "")) {
        this.linkWarnFlag = true;
        this.linkInputWarn.border = "1.25px solid red";
        return;
      } else if (this.imgChooseFlag) {
        let linkObj = {
          page: this.navArray[this.newIconPageChooseFlag].page,
          img: this.imageUrl,
          url: this.newLinkUrl,
          linkName: this.newLinkName,
        };
        this.linkTotalArray.push(linkObj);
        window.localStorage.setItem(
          "local",
          JSON.stringify(this.linkTotalArray)
        );
        // let str = atob(this.imageUrl)
        // this.imageUrl=decodeURI()
        // console.log(this.imageUrl);
        // 新增一个图标(自定义图片)
        // console.log(this.imageUrl);
        //   let that = this;
        // let formData = new window.FormData();
        // formData.append("file", that.imgFile);
        // console.log(0);
        // await this.compressImg(linkObj.img, 0.5, this.useImg, linkObj);
        // await this.compressImg(linkObj.img, 0.5, linkObj);

        // await useImg(base64, linkObj);
        // console.log(1111111111);
        // console.log(this.base64Url);

        // let md5url = md5(this.imageUrl);
        // console.log(md5url);
        // axios
        //   .post("http://localhost:8080/addOneLinkImg", {
        //     params:{
        //       user_id: this.user_id,
        //       page:  this.navArray[this.newIconPageChooseFlag].page,
        //       url: this.newLinkUrl,
        //       linkName: this.newLinkName,
        //       img:"https://img.wxcha.com/m00/12/db/594dd9fb43029a58df9acc0e4591d94b.jpg",
        //      }
        //   })
        //   .then((response) => {
        //     console.log(6666666666);
        //     // console.log(response);
        //     return;
        //   })
        //   .catch(function () {
        //     return;
        //   });

        // var config = {
        //   method: "post",
        //   url: "http://localhost:8080/addOneLinkImg",
        //   params: {
        //     user_id: this.user_id,
        //     page: this.navArray[this.newIconPageChooseFlag].page,
        //     url: this.newLinkUrl,
        //     linkName: this.newLinkName,
        //     img: this.imageUrl,
        //   },
        // };

        // axios(config)
        //   .then(function (response) {
        //     console.log(JSON.stringify(response.data));
        //   })
        //   .catch(function (error) {
        //     console.log(error);
        //   });

        this.addLink();
      } else {
        let linkObj = {
          page: this.navArray[this.newIconPageChooseFlag].page,
          color: "background-color:" + this.colorBoxStyle.backgroundColor,
          url: this.newLinkUrl,
          linkName: this.newLinkName,
        };
        // console.log(linkObj);
        this.linkTotalArray.push(linkObj);
        // 新增一个图标(文字图标)
        axios
          .get(this.$baseUrl + "/addOneLinkColor", {
            params: {
              user_id: this.user_id,
              page: this.navArray[this.newIconPageChooseFlag].page,
              url: this.newLinkUrl,
              linkName: this.newLinkName,
              color: "background-color:" + this.colorBoxStyle.backgroundColor,
            },
          })
          .then((response) => {
            // console.log(response);
          })
          .catch(function () {
            return;
          });

        this.addLink();
      }
    },

    // 新建图标所在分页选择
    newIconChoosePage(index) {
      this.newIconPageChooseFlag = index;
    },
    // 切换新建展示图标颜色
    changeShowColor(newColor) {
      this.colorBoxStyle.backgroundColor = newColor;
    },
    // 获取上传文件的url并渲染图片
    // getFile(e) {
    //   const resultFile = e.target.files; // input 获取的文件列表
    //   // console.log(`resultFile`, resultFile)

    //   const aBlob = new Blob([resultFile[0]], { type: "video/mp4" }); // 指定转换成blob的类型
    //   console.log(`aBlob`, aBlob);

    //   const reader = new FileReader(); // 3 新建 FileReader 对象,用于操作文件
    //   // console.log(`reader`, reader)
    //   reader.onload = (ev) => {
    //     const base64Url = ev.target.result; // 5 base64内容
    //     console.log(base64Url);
    //   };
    //   reader.readAsDataURL(aBlob); // 4 将文件转换成指定类型的数据
    // },
    // 获取上传文件的url并渲染图片
    getFile(e) {
      this.imgChooseFlag = true;
      this.isUpload = true;
      let file = e.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function () {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.imageUrl = "data:image/png;base64," + url;
      };
    },

    // getFile(e) {
    //   //获取file内容
    //   let files = e.target.files[0];
    //   this.imgFile = files;
    // },
    //上传文件
    // importRow() {
    //   let that = this;
    //   let formData = new window.FormData();
    //   formData.append("file", that.imgFile);
    //   // that.importUrl 上传的接口url
    //   that.$axios
    //     .post(that.imageUrl, formData)
    //     .then(function (response) {
    //       that.$message.success("上传成功");
    //     })
    //     .catch(function (error) {
    //       that.$message.error(res.data.msg);
    //     });
    // },

    // 选择自定义颜色的文字图标
    chooseColor() {
      this.imgChooseFlag = false;
    },
    // 选择上传图片的图标
    chooseImg() {
      this.imgChooseFlag = true;
    },
    // 右键图标菜单
    rightClick(event, index) {
      this.menuFlag = false;
      this.link_id = this.linkTotalArray[index].link_id;
      this.chooseLinkIndex = index;
      setTimeout(() => {
        this.menuFlag = true;
        this.menuStyle.top = event.clientY + "px";
        this.menuStyle.left = event.clientX + "px";
      }, 100);
      clearTimeout;
    },
    // 关闭右键图标菜单
    menuClose() {
      this.menuFlag = false;
    },
    // 编辑图标弹窗
    showChangeLink() {
      this.menuFlag = false;
      // if(this.user_id==-99999){
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.link_id = this.linkTotalArray[this.chooseLinkIndex].link_id;
      // console.log(this.link_id);
      this.changeLinkFlag = true;
      this.menuFlag = false;
      this.oldIconPageChooseFlag = this.pageIndex;
      this.oldLinkName = this.linkTotalArray[this.chooseLinkIndex].linkName;
      this.oldLinkUrl = this.linkTotalArray[this.chooseLinkIndex].url;
      this.oldLinkIcon = this.linkTotalArray[this.chooseLinkIndex].icon;
      this.oldLinkColor = this.colorBoxStyle.backgroundColor;
      this.imageUrl = this.linkTotalArray[this.chooseLinkIndex].img;
      this.oldLinkImg = this.imageUrl;
      this.linkWarnFlag = false;
      this.linkInputWarn.border = "1.25px solid transparent !important";
    },
    // 编辑图标所在页面
    oldIconChoosePage(index) {
      this.oldIconPageChooseFlag = index;
    },
    // 确认修改图标
    showChangeLinkOK() {
      if ((this.oldLinkName == "") | (this.oldLinkUrl == "")) {
        this.linkWarnFlag = true;
        this.linkInputWarn.border = "1.25px solid red";
        return;
      } else {
        if (!this.imgChooseFlag) {
          this.linkTotalArray[this.chooseLinkIndex].linkName = this.oldLinkName;
          this.linkTotalArray[this.chooseLinkIndex].url = this.oldLinkUrl;
          this.linkTotalArray[this.chooseLinkIndex].page =
            this.navArray[this.oldIconPageChooseFlag].page;
          this.changeLinkFlag = false;
          this.linkTotalArray[this.chooseLinkIndex].color =
            "background-color:" + this.colorBoxStyle.backgroundColor;
          this.linkTotalArray[this.chooseLinkIndex].img = "";
          if (this.linkTotalArray[this.chooseLinkIndex].icon)
            this.linkTotalArray[this.chooseLinkIndex].icon = "";
          window.localStorage.setItem(
            "local",
            JSON.stringify(this.linkTotalArray)
          );
          // 修改一个图标(文字图标)
          // axios
          //   .get("http://localhost:8080/updateOneLinkColor", {
          //     params: {
          //       user_id: this.user_id,
          //       link_id:this.link_id,
          //       page: this.navArray[this.newIconPageChooseFlag].page,
          //       url: this.newLinkUrl,
          //       linkName: this.newLinkName,
          //       color: "background-color:" + this.colorBoxStyle.backgroundColor,
          //     },
          //   })
          //   .then((response) => {
          //     console.log(response);
          //   })
          //   .catch(function () {
          //     return;
          //   });
          return;
        } else {
          this.linkTotalArray[this.chooseLinkIndex].linkName = this.oldLinkName;
          this.linkTotalArray[this.chooseLinkIndex].url = this.oldLinkUrl;
          this.linkTotalArray[this.chooseLinkIndex].page =
            this.navArray[this.oldIconPageChooseFlag].page;
          this.changeLinkFlag = false;
          this.linkTotalArray[this.chooseLinkIndex].color = "background-color:";
          this.linkTotalArray[this.chooseLinkIndex].img = this.imageUrl;
          if (this.linkTotalArray[this.chooseLinkIndex].icon & !this.imageUrl)
            this.linkTotalArray[this.chooseLinkIndex].icon = "";
          window.localStorage.setItem(
            "local",
            JSON.stringify(this.linkTotalArray)
          );

          return;
        }
      }
    },
    // 取消修改图标
    showChangeLinkNO() {
      this.changeLinkFlag = false;
      this.oldIconPageChooseFlag = 0;
      this.oldLinkName = "";
      this.oldLinkUrl = "";
      this.linkTotalArray[this.chooseLinkIndex].color = this.oldLinkColor;
      this.linkTotalArray[this.chooseLinkIndex].img = this.oldLinkImg;
      this.linkTotalArray[this.chooseLinkIndex].icon = this.oldLinkIcon;
      this.oldLinkColor = "";
      this.oldLinkImg = "";
      this.oldLinkIcon = "";
      this.imageUrl = "";
      if ((this.linkWarnFlag = true)) {
        this.linkWarnFlag = false;
        this.linkInputWarn.border = "1.25px solid transparent !important";
      }
    },
    // 删除图标弹窗
    showDeleteLink() {
      this.menuFlag = false;
      // if(this.user_id==-99999){
      //   this.$message.error("请登录后使用该功能");
      //   return;
      // }
      this.deleteLinkFlag = !this.deleteLinkFlag;
      this.menuFlag = false;
    },
    // 确认删除图标
    deleteLinkOK() {
      let arr = this.linkTotalArray;
      arr.splice(this.chooseLinkIndex, 1);
      this.linkTotalArray = arr;

      // 删除单个图标接口
      axios
        .get(this.$baseUrl + "/deleteOneLink", {
          params: {
            user_id: this.user_id,
            link_id: this.link_id,
          },
        })
        .then((response) => {})
        .catch((err) => {
          // console.log(err);
        });
      window.localStorage.setItem("local", JSON.stringify(this.linkTotalArray));
      arr = [];
      this.deleteLinkFlag = !this.deleteLinkFlag;
      this.menuFlag = false;
      this.chooseLinkIndex = 99999;
    },
    // 移动图标结束重新渲染接口
    endMove() {
      window.localStorage.setItem("local", JSON.stringify(this.linkTotalArray));
      let locList0 = JSON.parse(window.localStorage.getItem("local"));
      this.linkTotalArray = locList0;
    },
    // 修改壁纸弹窗
    changeBgOpen() {
      bus.$emit("bgFlag", true);
    },
    // 夜间模式
    darkChange() {
      this.$store.dispatch("darkModel", this.darkFlag);
    },
    // 登录弹窗
    loginDis() {
      if (!this.loginSuccess) {
        // 登录页面弹窗开启
        bus.$emit("loginFlag", true);
        return;
      }
      if (this.loginSuccess) {
        // 修改用户界面弹窗开启
        bus.$emit("userChangeFlag", true);
      }
    },
    // 设置弹窗
    settingBoxOpen() {
      bus.$emit("settingOnFlag", true);
    },
  },
  beforeDestroy() {
    bus.$off();
  },
};
</script>
<style scoped>
/* 取消img错误显示 */
img[src=""],
img:not([src]) {
  opacity: 0;
}
.navBox {
  width: 50px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  background-color: #f4f4f4;
  box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.25);
  z-index: 20;
  transition: all 0.3s;
  overflow: hidden;
}
.navBox:hover {
  width: 120px;
}
.navBoxDark {
  background-color: #2e2e2e;
}
/* 头像 */
.headIconBox {
  width: 40px;
  height: 40px;
  margin: 20px 20px 20px 5px;
  background-color: #ffdabd;
  border-radius: 10rem;
  transition: all 0.2s;
  cursor: pointer;
  color: rgb(50, 50, 50);
}
.headIconBox:hover {
  color: #1b1b1b;
  background-color: orange;
  backdrop-filter: blur(5px);
}
.headIconBoxDark {
  background-color: #ffdabd;
  color: rgb(200, 200, 200);
}
.headIconBoxDark:hover {
  color: #ffffff;
  background-color: orange;
}
.headIconBox img {
  margin: 2.5px 0px 0px 3px;
  width: 35px;
  height: 35px;
  float: left;
}
.headP {
  width: 60px;
  margin-top: 10px;
  padding-left: 10px;
  text-align: center;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* 导航栏 */
.navItem {
  width: 120px;
  height: 50px;
  transition: all 0.3s;
  line-height: 50px;
  background-color: #f4f4f4;
  color: rgb(100, 100, 100);
  cursor: pointer;
  overflow: hidden;
}
.navItem:hover {
  background-color: #e6e6e6;
  backdrop-filter: blur(5px);
}
.navItemDark {
  background-color: #2e2e2e;
  color: rgb(200, 200, 200);
}
.navItemDark:hover {
  background-color: #3f3f3f;
  color: rgb(255, 255, 255);
  backdrop-filter: blur(5px);
}
.navIcon {
  font-size: 26px;
  position: absolute;
  left: 10px;
  z-index: 20;
}
.navItem:hover .navIcon {
  color: #202020;
}
.navItemDark:hover .navIcon {
  color: #ffffff;
}
.navP {
  display: block;
  width: 60px;
  font-size: 14px;
  color: rgb(100, 100, 100);
  margin-left: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 50px;
  z-index: 21;
}
.navItem:hover .navP {
  color: #202020;
}
.navItemDark:hover .navP {
  color: #ffffff;
}
.navItemChoose {
  background-color: #f4f4f4 !important;
  backdrop-filter: blur(5px) !important;
  color: rgb(236, 158, 0) !important;
}
.navItemChoose .navIcon {
  color: rgb(236, 158, 0) !important;
}
.navItemChoose .navP {
  color: rgb(236, 158, 0) !important;
}
.navItemChooseDark {
  background-color: #2e2e2e !important;
  backdrop-filter: blur(5px) !important;
  color: rgb(236, 158, 0) !important;
}
.navItemChooseDark .navIcon {
  color: rgb(236, 158, 0) !important;
}
.navItemChooseDark .navP {
  color: rgb(236, 158, 0) !important;
}
/* 底部设置 */
.bottomIconBigBox {
  width: 120px;
  position: fixed;
  bottom: 2.5px;
  transition: all 0.3s;
}
.bottomIconBox {
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  overflow: hidden;
  background-color: #f4f4f4;
  transition: all 0.3s;
}
.bottomIconBox:hover {
  background-color: #e6e6e6;
}
.bottomIconBoxDark {
  background-color: #2e2e2e;
}
.bottomIconBoxDark:hover {
  background-color: #3f3f3f;
}
.bottomIcon {
  font-size: 24px;
  color: rgb(100, 100, 100);
  float: left;
  padding-left: 10px;
}
.bottomP {
  font-size: 14px;
  color: rgb(100, 100, 100);
  margin-left: 50px;
}
.bottomIconBox:hover .bottomIcon {
  color: #202020;
}
.bottomIconBox:hover .bottomP {
  color: #202020;
}
.bottomIconBoxDark:hover .bottomIcon {
  color: #ffffff;
}
.bottomIconBoxDark:hover .bottomP {
  color: #ffffff;
}
/* 整体设置 */
.changeNav {
  width: 50px;
  overflow: hidden;
}
.navBox:hover .changeNav {
  width: 120px;
}
.appear-enter-active,
.appear-leave-active {
  transition: all 0.3s;
}
.appear-enter,
.appear-leave-to {
  opacity: 0;
}
.page {
  width: 500px;
  height: 100vh;
  position: absolute;
  z-index: 15;
}
.deletePageBox {
  width: 18px;
  height: 50px;
  position: absolute;
  right: 5px;
  opacity: 0;
  transition: all 0.3s;
}
.navItem:hover .deletePageBox {
  opacity: 0.8;
}
/* 天气 */
.weatherBox {
  width: 370px;
  height: 150px;
  margin-top: 20px;
  margin-left: 15px;
}
/* 快速链接 */
.linkBox {
  width: 450px;
  margin-top: 10px;
  margin-left: 50px;
}
.linkItem {
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin: 25px;
  display: inline-block;
  text-align: center;
  transition: box-shadow 0.2s;
  border-radius: 10px;
  /* background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 5px 5px 10px #dbdbdb, -5px -5px 10px #ffffff; */
}
.addLinkBtnDark {
  background-color: rgb(121, 121, 121) !important;
  color: #fff !important;
}
/* .linkItem:hover {
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 5px 5px 10px #ababab, -5px -5px 10px #ffffff;
} */
.linkItem svg {
  width: 50px;
  height: 50px;
  font-size: 30px;
  line-height: 35px;
  border-radius: 10px;
  margin-bottom: 3px;
}
.linkItem span {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  line-height: 50px;
  border-radius: 10px;
  background-color: rgb(249, 249, 249);
  backdrop-filter: blur(5px);
  color: rgb(0, 0, 0);
  margin-bottom: 3px;
}
.linkItem p {
  font-size: 12px;
  display: -webkit-box;
  display: -moz-box;
  width: 50px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: all 0.3s;
}
/* 新建导航弹窗页 */
.addNavBg {
  width: 450px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(1.5px);
  z-index: 998;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addNavBgDark {
  background-color: rgba(0, 0, 0, 0.3);
}
.addNavBox {
  width: 400px;
  height: 420px;
  background-color: #fff;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
  position: relative;
  margin: 0 auto;
  z-index: 999;
  color: #525252;
}
.addNavBox h2 {
  color: #525252;
  text-align: center;
  margin-top: 20px;
}
.addNavBox button {
  width: 80px;
  height: 40px;
  border-radius: 1rem;
  background-color: #f6c031;
  border: rgb(246, 170, 28) 1px solid;
  cursor: pointer;
  transition: all 0.3s;
}
.addBtnBox button:nth-child(1) {
  margin-left: 40px;
}
.addBtnBox button:nth-child(2) {
  margin-right: 40px;
}
.addNavBoxP {
  text-align: left;
  font-size: 14px;
  margin: 5px 20px;
  color: #525252;
}

.addNavBoxDark {
  background-color: rgba(48, 48, 48);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25);
  color: #fff;
}
.addNavBoxDark h2 {
  text-align: center;
  margin-top: 20px;
  color: #fff;
}
.addNavBoxDark .addNavBoxP {
  color: #fff;
}
.pageNameInput {
  width: 80%;
  height: 30px;
  padding: 0 20px;
  margin: 10px 20px;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255);
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
}
.pageNameInput:hover {
  box-shadow: 0px 0px 0.8px 0.8px rgba(0, 0, 0, 0.2);
}
.pageNameInput:focus {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.28);
}
.pageNameInputDark {
  background-color: rgb(103, 103, 103);
  color: #fff;
}
.pageNameInputDark:hover {
  box-shadow: 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.15);
}
.pageNameInputDark:focus {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.2);
}
.pageNameInputDark::placeholder {
  color: rgb(165, 165, 165);
}
.nameWarn-enter-active,
.nameWarn-leave-active {
  transition: all 0.5s;
}
.nameWarn-enter,
.nameWarn-leave-to {
  opacity: 0;
}
.warnP {
  color: red;
  font-size: 10px;
  display: inline-block;
  margin-left: 20px;
}
.choosePageIconBox {
  width: 340px;
  height: 800px;
  max-height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 10px 20px;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255);
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  padding: 10px;
  padding-left: 14px;
}
.choosePageIconBoxDark {
  background-color: rgb(103, 103, 103);
}
.choosePageIconBox::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
}
.choosePageIconBox:-ms-scrollbar {
  width: 0px;
  opacity: 0;
}
.pageIcon {
  display: inline-block;
  width: 40px;
  height: 36px;
  padding-top: 4px;
  margin: 4px;
  line-height: center;
  text-align: center;
  background-color: rgba(255, 255, 255);
  border-radius: 10px;
  transition: all 0.3s;
}
.pageIcon:hover {
  background-color: rgb(240, 240, 240);
}

.iconSvg {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: center;
  text-align: center;
  transition: all linear 0.2s;
  color: rgb(62, 62, 62);
}
.pageIcon:hover .iconSvg {
  color: rgb(40, 40, 40);
}
.pageIconDark {
  /* color: rgb(228, 228, 228); */
  background-color: rgb(103, 103, 103);
}
.pageIconDark .iconSvg {
  color: #e7e7e7;
}
.pageIconDark:hover {
  background-color: rgb(75, 75, 75);
}
.pageIconDark:hover .iconSvg {
  color: #ffffff;
}
.pageIconChoose {
  background-color: rgb(255, 255, 255) !important;
}
.pageIconChooseDark {
  background-color: rgb(103, 103, 103) !important;
}
.pageIconChoose span {
  color: #fabe26 !important;
}
/* 按钮 */
.addBtnBox {
  width: 100%;
  height: 60px;
  margin-top: 10px;
  color: #525252;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.addNavBox button:hover {
  box-shadow: 0px 0px 1.5px 1.5px rgba(246, 170, 28, 0.45);
}
.addNavBox button:active {
  box-shadow: 0px 0px 1px 1px rgba(246, 170, 28, 0.15);
}
/* 新建图标分页选择 */
.linkPageChoose {
  width: 360px;
  max-height: 105px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: none;
  /* border-radius: 10px; */
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  text-align: center;
  margin-left: 20px;
  transition: all 0.2s;
  cursor: pointer;
}
.linkPageChoose::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
}
.linkPageChoose:-ms-scrollbar {
  width: 0px;
  opacity: 0;
}
.linkPageChooseLi {
  width: 100%;
  height: 20px;
  padding: 5px 0;
  transition: all 0.2s;
}
.linkPageChooseLi:hover {
  color: rgb(0, 0, 0);
  background-color: #e3e3e362;
}
.linkPageChooseLiDark:hover {
  color: rgb(255, 255, 255);
  background-color: #575757;
}
.newIconPageChoose {
  color: #fff !important;
  background-color: #f6c031 !important;
}
/* 选择颜色预览 */
.colorChooseBox {
  width: 340px;
  height: 130px;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  margin-left: 20px;
  padding: 10px;
  transition: all 0.2s;
}
.colorBox {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin: 5px 7px;
  cursor: pointer;
  display: inline-block;
  position: relative;
}
.otherColorBox {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  line-height: 20px;
  padding-top: 1px;
}
.showColorBigBox {
  width: 100%;
  height: 60px;
  position: relative;
}
.showColorBox {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 5px;
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
  cursor: pointer;
}
.showColorBoxSvgDark {
  color: #363636;
}
/* 上传图片预览 */
.showFileBox {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 80px;
  top: 5px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 18px;
}
.showFileBox span {
  line-height: 50px;
  color: #000;
}
.showFileBox img {
  z-index: 30;
}
.showFileBox i {
  display: block;
  font-size: 30px;
  line-height: 50px;
  color: #000;
  text-align: center;
}
.showFileBox input {
  position: absolute;
  overflow: hidden;
  left: 0px;
  top: 0px;
  opacity: 0;
  width: 50px;
  height: 50px;
}
.showFileBox svg {
  width: 50px;
  height: 50px;
  font-size: 30px;
  line-height: 35px;
  border-radius: 10px;
  margin-bottom: 3px;
}
.upFileBox {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  box-shadow: 0px 0px 0.6px 0.6px rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 145px;
  top: 5px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 22px;
}
.upFileBox span {
  line-height: 50px;
  color: #000;
}
.upFileBox img {
  z-index: 30;
}
.upFileBox i {
  display: block;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  color: #525252;
}
.upFileBox input {
  position: absolute;
  overflow: hidden;
  left: 0px;
  top: 0px;
  opacity: 0;
  width: 50px;
  height: 50px;
}
.showColorBox svg {
  width: 50px;
  height: 50px;
}
.chooseColorOrImg {
  box-shadow: 0px 0px 4px 2px #737373d3;
}
/* 右键编辑菜单弹窗 */
.rightClickMenu {
  width: 130px;
  height: 110px;
  position: fixed;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 2px 2px rgba(135, 135, 135, 0.15);
  backdrop-filter: blur(10px);
  color: black;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  z-index: 30;
  transition: all 0.3s;
}
.rightClickMenuSmallBox {
  width: 110px;
  height: 30px;
  border-radius: 5px;
  margin: 5px 8px;
  padding-left: 5px;
  transition: all 0.2s;
  line-height: 28px;
}
.rightClickMenuSmallBox:hover {
  background-color: rgba(184, 184, 184, 0.5);
}
.rightClickMenuSmallBox span {
  margin-left: 18px;
}
/* 深色模式 */
.rightClickMenuDark {
  background-color: rgba(100, 100, 100, 0.4);
  color: #fff;
}
.transMenu-enter-active {
  animation: bounce-in 0.3s;
}
.transMenu-leave-active {
  animation: bounce-in 0.3s reverse;
}
@keyframes bounce-in {
  0% {
    transform-origin: 0px 0px;
    transform: scale(0);
  }
  50% {
    transform-origin: 0px 0px;
    transform: scale(1.25);
  }
  100% {
    transform-origin: 0px 0px;
    transform: scale(1);
  }
}
</style>